<template>
  <section class="content animate__animated  animate__fadeInLeft">
    <section class="content_title">
      <img src="https://oss.qiacaiba.com/screen/screen/card01_tag03.png">
    </section>
    <section class="content_swiper">
      <el-carousel
        :interval="5000"
        indicator-position="none"
        arrow="never"
        height="840px"
        @change="swiperChange"
      >
        <el-carousel-item>
          <CardItem
            :data="Data.card1"
            :index="index"
          />
          <CardItem
            :data="Data.card2"
            :index="index"
          />
          <CardItem
            :data="Data.card3"
            :index="index"
          />
          <CardItem
            :data="Data.card4"
            :index="index"
          />
        </el-carousel-item>
        <el-carousel-item>
          <CardItem
            :data="Data.card5"
            :index="index"
          />
          <CardItem
            :data="Data.card6"
            :index="index"
          />
          <CardItem
            :data="Data.card7"
            :index="index"
          />
          <CardItem
            :data="Data.card8"
            :index="index"
          />
        </el-carousel-item>
      </el-carousel>
    </section>
  </section>
</template>
<script setup lang="ts">

import { ref } from "vue";

import Data from "../config";

import CardItem from "./card.vue";
const index = ref(0);
const swiperChange =(e:number) => {
  index.value = e ;
};
</script>
<style scoped lang="scss">
.content {
  width: 550px;

  .content_title {

    display: flex;
    justify-content: center;
    img {
      display: block;
      width: 231px;
      height: 56px;
    }
  }

  .content_swiper {
    width: 100%;
    margin-top: 10px;
  }
}
</style>
